Convert tooltip, modal dialog, file attachment and transcript root classes to CSS modules by OEvgeny · Pull Request #5997 · microsoft/BotFramework-WebChat

Eugene (OEvgeny) · 2026-10-31T03:38:56Z

Fluent styles some webchat__* classes from emotion style sets, which a CSS module theme cannot reach.

Changelog Entry

Changed

Converted the tooltip, modal dialog, file attachment and transcript root classes to CSS Modules, keeping their webchat__ class names, so Fluent styles them through the CSS module theme, in PR #5997, by @OEvgeny

Removed

💥 Deprecated the modalDialog and tooltip style set entries, which no longer affect rendering, in PR #5997, by @OEvgeny

Description

These 24 classes now come from CSS modules and keep their webchat__ names. Fluent styles 18 of them through <CSSModuleThemeComposer>.

styleSet.modalDialog and styleSet.tooltip no longer apply; style webchat__modal-dialog and webchat__tooltip instead. Both go on or after 2028-10-16.

Design

fileContent and root style set entries read style options, so they stay
ViewCodeDialog styles Popover's parts through a CSS module theme passed to the internal showModal(), rather than per-part className props

Specific Changes

CSS modules: Tooltip, Popover, FileContent, BasicTranscript (with ActivityRow), BasicWebChat, Composer, FocusTrap
Fluent: rules join the Fluent: style Web Chat elements through the CSS module theme #5993 override module
No html2 snapshot changes

I have added tests and executed them locally
I have added .changelog/<PR#>-<slug>.md
I have updated documentation

Review Checklist

This section is for contributors to review your work.

Accessibility reviewed (tab order, content readability, alt text, color contrast)
Browser and platform compatibilities reviewed
CSS styles reviewed (minimal rules, no z-index)
Documents reviewed (docs, samples, live demo)
Internationalization reviewed (strings, unit formatting)
package.json and package-lock.json reviewed
Security reviewed (no data URIs, check for nonce leak)
Tests reviewed (coverage, legitimacy)

… CSS module theme The tooltip keeps its webchat__tooltip class names through webChatPrefixedClassName.

…h the CSS module theme The dialog keeps its webchat__modal-dialog class names through webChatPrefixedClassName, so ViewCodeDialog.module.css and tests still select them.

…Fluent through the CSS module theme FileContent's local styles moved to FileContent.module.css; its class names keep the webchat__ prefix, so the option-driven "fileContent" style set entry still applies the style options and nothing renders differently.

…style them through the CSS module theme basic-transcript, __scrollable, __filler (BasicTranscript local styles), __activity-body (ActivityRow) and focus-trap (FocusTrap) come from CSS modules and keep their webchat__ class names, which code and tests still query.

…odules and style them through the CSS module theme webchat__surface (BasicWebChat local styles; the option-driven root style set entry stays) and webchat__css-custom-properties (Composer local styles) come from CSS modules and keep their names; CSSCustomPropertiesContainer still selects the latter for the style options.

…eason, as in the activity button FileContent, ActivityRow and FocusTrap declared local names for themes with ":not(*)" rules. They now use the declaration that the build strips once the class map is built.

… longer used for rendering Like the entries in #5881: customizing them has no effect, and their styles are in Popover.module.css and Tooltip.module.css.

…n the pull request

… CSS modules are The lightning-css vibe-grep rule now also accepts ".webchat :has(> .w<hash>_", for a rule on the parent of a class.

Its only class, basic-transcript__activity-body, belongs to the transcript. FocusTrap.module.css stays: FocusTrap is also used by part grouping.

… of the modal dialog's readable class names showModal() takes a CSS module theme, which ModalDialogComposer provides to the dialog. ViewCodeDialog passes its own class names for the dialog's parts, so its rules no longer depend on webchat__modal-dialog.

… module passed whole as its theme Replaces the hand-picked list of class names with ViewCodeDialogTheme.module.css. Its class names only reach this dialog, and ":is(dialog)" out-specifies Popover.module.css as ".view-code-dialog" did.

…Transcript.module.css local names They keep their webchat__ class names on the DOM; BasicTranscript.module.css no longer selects them through :global().

Copilot

🟡 Changes recommended

The focused-hover close-button selector lacks sufficient specificity, allowing the later-injected base rule’s hard-coded background to override the Fluent token, including in dark themes.

1 open issue

Use a more-specific selector for focused, hovered close buttons · New

What changed in this PR

This PR extends the CSS module theming introduced in #5993 to tooltips, modal dialogs, file attachments, and transcript roots, while preserving their readable webchat__ class names.

Changes:

Moves component styles and Fluent overrides into CSS modules.
Adds per-dialog CSS module themes for the View Code dialog.
Deprecates the unused modalDialog and tooltip style set entries and updates selector validation.

File	Description
`packages/vibe-grep/src/rules/lightning-css.yaml`	Allows tooltip parent selectors in compiled CSS.
`packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css`	Consolidates Fluent overrides for migrated classes.
`packages/fluent-theme/src/components/theme/Theme.module.css`	Moves component overrides into the shared theme module.
`packages/component/src/Transcript/FocusTrap.tsx`	Applies themed focus-trap classes.
`packages/component/src/Transcript/FocusTrap.module.css`	Exposes the focus-trap theme target.
`packages/component/src/Transcript/ActivityRow.tsx`	Applies module classes to activity focus elements.
`packages/component/src/Tooltip/private/Tooltip.tsx`	Uses CSS module classes and validates props.
`packages/component/src/Tooltip/private/Tooltip.module.css`	Defines tooltip positioning and appearance.
`packages/component/src/Styles/StyleSet/Tooltip.ts`	Documents tooltip style set deprecation.
`packages/component/src/Styles/StyleSet/ModalDialog.ts`	Documents modal style set deprecation.
`packages/component/src/Styles/createStyleSet.ts`	Marks both legacy entries as deprecated.
`packages/component/src/providers/ModalDialog/private/Popover.tsx`	Applies modal module classes and validates props.
`packages/component/src/providers/ModalDialog/private/Popover.module.css`	Defines base modal styles.
`packages/component/src/providers/ModalDialog/private/Context.ts`	Adds a per-dialog theme option.
`packages/component/src/providers/ModalDialog/ModalDialogComposer.tsx`	Composes themes around individual dialogs.
`packages/component/src/Composer.tsx`	Applies the root CSS module class.
`packages/component/src/Composer.module.css`	Moves live-region hiding styles into CSS.
`packages/component/src/BasicWebChat.tsx`	Applies the surface module class.
`packages/component/src/BasicWebChat.module.css`	Defines surface flex layout.
`packages/component/src/BasicTranscript.tsx`	Applies module classes throughout the transcript.
`packages/component/src/BasicTranscript.module.css`	Defines transcript styles and theme targets.
`packages/component/src/Attachment/Text/private/ViewCodeDialogTheme.module.css`	Adds dialog-part layout overrides.
`packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css`	Removes rules moved to the dialog theme.
`packages/component/src/Attachment/Text/private/ActivityViewCodeButton.tsx`	Passes the theme when opening the dialog.
`packages/component/src/Attachment/FileContent.tsx`	Applies attachment module classes while retaining style options.
`packages/component/src/Attachment/FileContent.module.css`	Defines attachment layout and theme targets.
`.changelog/5997-fix-css-fluent-context-2.md`	Records the migration and style set deprecations.

_{Review effort: Balanced}

Popover.module.css is injected after the Fluent stylesheet, so its focused hover rule tied with Fluent's hover rule and won with its light gray background, also in dark themes.

Eugene Olonov added 10 commits October 31, 2026 11:17

Convert the tooltip to CSS Modules and style it in Fluent through the…

bc3c00a

… CSS module theme The tooltip keeps its webchat__tooltip class names through webChatPrefixedClassName.

Convert the modal dialog to CSS Modules and style it in Fluent throug…

1919d15

…h the CSS module theme The dialog keeps its webchat__modal-dialog class names through webChatPrefixedClassName, so ViewCodeDialog.module.css and tests still select them.

Keep class names of rules without styles through --webchat-preserve-r…

67aee9a

…eason, as in the activity button FileContent, ActivityRow and FocusTrap declared local names for themes with ":not(*)" rules. They now use the declaration that the build strips once the class map is built.

Deprecate the modalDialog and tooltip style set entries, which are no…

50eb0fa

… longer used for rendering Like the entries in #5881: customizing them has no effect, and their styles are in Popover.module.css and Tooltip.module.css.

Add the changelog fragment

5cd6455

Add the Changed entry to the changelog fragment

4c191e5

Shorten the Removed changelog entry to one clause, with the details i…

cb28b4e

…n the pull request

Eugene (OEvgeny) force-pushed the OEvgeny/fix-css-fluent-context-2 branch from 9b130dd to cb28b4e Compare October 31, 2026 18:24

Eugene (OEvgeny) commented Nov 1, 2026

View reviewed changes

Comment thread packages/component/src/Tooltip/private/Tooltip.module.css Resolved

Eugene (OEvgeny) commented Nov 1, 2026

View reviewed changes

Comment thread packages/component/src/BasicTranscript.module.css Resolved

Eugene Olonov added 2 commits November 1, 2026 12:04

Scope the tooltip's parent rule under .webchat, as the other Web Chat…

6692552

… CSS modules are The lightning-css vibe-grep rule now also accepts ".webchat :has(> .w<hash>_", for a rule on the parent of a class.

Fold ActivityRow.module.css into BasicTranscript.module.css

5114be9

Its only class, basic-transcript__activity-body, belongs to the transcript. FocusTrap.module.css stays: FocusTrap is also used by part grouping.

Eugene (OEvgeny) commented Nov 3, 2026

View reviewed changes

Comment thread packages/component/src/Attachment/Text/private/ViewCodeDialog.module.css Resolved

Eugene Olonov added 3 commits November 2, 2026 17:33

Turn the transcript list and activity focus target classes into Basic…

6462678

…Transcript.module.css local names They keep their webchat__ class names on the DOM; BasicTranscript.module.css no longer selects them through :global().

Eugene (OEvgeny) marked this pull request as ready for review November 3, 2026 05:16

Copilot AI balanced review requested due to automatic review settings November 3, 2026 05:17

Eugene (OEvgeny) requested review from William Wong (compulim), Chris Whitten (cwhitten) and Thomas Durnford (tdurnford) as code owners November 3, 2026 05:17

Copilot started reviewing on behalf of Eugene (OEvgeny) November 3, 2026 05:17

View session

Copilot AI reviewed Nov 3, 2026

View reviewed changes

Comment thread packages/fluent-theme/src/private/fluentCSSModuleTheme.module.css Resolved

Keep Fluent's hover background on the focused modal dialog close button

6b09b1e

Popover.module.css is injected after the Fluent stylesheet, so its focused hover rule tied with Fluent's hover rule and won with its light gray background, also in dark themes.

William Wong (compulim) approved these changes Nov 3, 2026

View reviewed changes

Merge branch 'main' into OEvgeny/fix-css-fluent-context-2

18b661d

Eugene (OEvgeny) merged commit e78fc7e into main Nov 3, 2026
45 checks passed

Eugene (OEvgeny) deleted the OEvgeny/fix-css-fluent-context-2 branch November 3, 2026 20:38

This was referenced Nov 3, 2026

Support React 19 #5955

Merged

fix: restore transcript screen reader primary action #5867

Draft

Navigation Menu

Repository navigation

Convert tooltip, modal dialog, file attachment and transcript root classes to CSS modules - #5997

Convert tooltip, modal dialog, file attachment and transcript root classes to CSS modules#5997
Eugene (OEvgeny) merged 17 commits into
mainfrom
OEvgeny/fix-css-fluent-context-2

Eugene (OEvgeny) commented Oct 31, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Eugene (OEvgeny) commented Oct 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog Entry

Changed

Removed

Description

Design

Specific Changes

Review Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Eugene (OEvgeny) commented Oct 31, 2026 •

edited

Loading